<!DOCTYPE html>
<html lang="zh">
<script type="text/javascript" src="/home/js/vue.js"></script>
<script type="text/javascript" src="/home/js/axios.js"></script>
<script type="text/javascript" src="/home/js/config.js"></script>
<script type="text/javascript" src="/home/js/layer.js"></script>
<head>
    <title>中国梦想游网站</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link href="/home/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="/home/css/common.css" rel="stylesheet" type="text/css"/>
    <link href="/home/css/order/common_css.css?cssVersion=1.9084" rel="stylesheet"/>
    <!--引入js文件-->
    <script type="text/javascript" src="/home/js/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        //核对车票信息
        function checkTicketInfo() {
            //获取当前所选中的复选框对象(乘客对象)
            var passengerObj = $("input[name='passenger']:checkbox:checked");
            //商品总数
            if (passengerObj.length < 1) {
                alert("请先选择乘车人信息！！！");
            } else {
                //提交表单数据,提交订单
                $("#Form01").submit();
                //清空复选框对象
                passengerObj.checked = false;
            }
        }
    </script>
</head>

<body>
<!--引入顶部文件-->
<div id="header"></div>
<script type="text/javascript">
    $(document).ready(function () {
        // 使用AJAX加载header
        $.ajax({
            url: '/home/header.html',
            type: 'GET',
            success: function (data) {
                $('#header').html(data);
            },
            error: function () {
                console.error('加载header失败');
            }
        });
    });
</script>
<div class="content" id="app">
    <!--列车信息 开始-->
    <div class="layout t-info" style="background: #0086f6">
        <div class="lay-hd" style="display: flex; align-items: center;">
            列车信息<span class="small">（以下余票信息仅供参考）</span>
        </div>
        <div class="lay-bd"><p class="t-tit" id="ticket_tit_id">
            <strong class="mr5">{{ trainInfo.departure_date }}</strong>
            <strong class="ml5">{{ trainInfo.train_number }}</strong>次<strong title="北京南"
                                                                               class="ml5">{{ trainInfo.start_station
            }}</strong>站
            <strong title="">（{{ trainInfo.start_time }}开）— {{ trainInfo.end_station
                }}</strong>站（{{ trainInfo.arrive_time }}到）
        </p>
            <p class="t-con" id="ticket_con_id">
                <span id="ticket_status_id" v-for="seat in trainInfo.seatInfoEntityList" :key="seat.seat_type_id"
                      class="s1">{{ seat.seatType.seat_type_name }}（<span class="colorA">￥{{ seat.price
                    }}</span>）</span>
            </p>
            <p style="color: #3177BF;">
                *显示的卧铺票价均为上铺票价，供您参考。具体票价以您确认支付时实际购买的铺别票价为准。
            </p>
        </div>
    </div>
    <!--列车信息 结束-->

    <!--多级票价信息 开始-->
    <div style="display: none;"><input style="display: none;" type="checkbox" id="fczk" aria-label="按空格键进行操作">
    </div>


    <!--乘客信息 开始-->
    <div class="layout person">
        <div class="lay-hd" style="background: #3b99fc">
            乘客信息<span class="small" id="psInfo">（选择乘车人）</span>
        </div>
        <div class="lay-bd">
            <div class="per-sel">
                <div class="item clearfix">
                    <h2 class="cy" id="normal_passenger_image_id" title="乘车人" style="padding: 0px">乘车人:</h2>
                    <ul id="normal_passenger_id">
                        <li v-for="p in passengers" :key="p.id">
                            <input name="passenger" :id="'passenger_'+p.id" type="checkbox" class="check"
                                   @click="addTicket(p, trainInfo.seatInfoEntityList, $event)">
                            <label style="cursor: pointer;">{{ p.passenger_name }}
                                <span>({{ p.passenger_type }})</span>
                            </label>
                        </li>
                    </ul>
                    <div class="btn-all" style="display: none;" id="btnAll"><a id="show_more_passenger_id" title="展开"
                                                                               href="javascript:" style="" shape="rect">
                        <label id="gd">更多</label><b></b></a>
                    </div>
                </div>
            </div>


            <!--存放乘客数据，利用表单提交数据（后台使用实体类中的数组获取数据并解析成集合类型）-->
            <form id="Form01" action="/view/ticketing/checkTicketInfo" method="post">
                <table class="per-ticket">
                    <tbody>
                    <tr align="center">
                        <th width="28" rowspan="1" colspan="1">序号</th>
                        <th rowspan="1" colspan="1">票种</th>
                        <th rowspan="1" colspan="1">席别</th>
                        <th rowspan="1" colspan="1">姓名</th>
                        <th rowspan="1" colspan="1">证件类型</th>
                        <th rowspan="1" colspan="1">证件号码</th>
                        <th width="70" rowspan="1" colspan="1"></th>
                        <th width="30" rowspan="1" colspan="1"></th>
                    </tr>
                    </tbody>
                    <tbody id="ticketInfo_id">
                    <!--起始乘客的数据-->
                    <tr id="tr_id_0">
                        <td align="center">1</td>

                        <td>
                            <select id="ticketType_1" name="confirmTicketType">
                                <option name="ticket_type" selected="selected" value="0">成人票</option>
                                <option value="1">儿童票</option>
                                <option value="2">学生票</option>
                                <option value="3">军人票</option>
                            </select>
                        </td>
                        <td>
                            <select id="seatType_1">
                                <option v-for="s in trainInfo.seatInfoEntityList" :key="s.seat_type_id"
                                        v-if="s.remain_nums>0" :value="s.seat_type_id+','+s.price">
                                    {{ s.seatType.seat_type_name }}（￥{{ s.price }}）
                                </option>
                            </select>
                        </td>
                        <td>
                            <div class="pos-rel"><input id="passenger_name_1" class="inptxt w110" value=""
                                                        title="不允许变更乘车人信息" size="12" maxlength="20"
                                                        type="text"
                                                        readonly="readonly">
                                <div class="w110-focus" id="passenger_name_1_notice" tabindex="-1"></div>
                            </div>

                        </td>
                        <td>
                            <select id="passenger_id_type_1" title="不允许变更乘车人信息"
                                    onfocus="this.defaultIndex=this.selectedIndex;"
                                    onchange="this.selectedIndex=this.defaultIndex;"
                                    role="combobox" aria-label="中国居民身份证,不允许修改乘车人信息">
                                <option value="1" selected="selected">中国居民身份证</option>
                                <option value="C">港澳居民来往内地通行证</option>
                                <option value="G">台湾居民来往大陆通行证</option>
                                <option value="B">护照</option>
                                <option value="H">外国人永久居留身份证</option>
                            </select>
                        </td>
                        <td>
                            <div class="pos-rel"><input id="passenger_id_no_1" class="inptxt w160" value=""
                                                        title="不允许变更乘车人信息" size="20" maxlength="35"
                                                        type="text"
                                                        readonly="readonly">
                                <div class="w160-focus" id="passenger_id_no_1_notice" tabindex="-1"></div>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <!--隐藏域保存列车数据-->
                <input type="hidden" name="departure_date" :value="trainInfo.departure_date">
                <input type="hidden" name="departure_time" :value="trainInfo.departure_time">
                <input type="hidden" name="train_number" :value="trainInfo.train_number">
                <input type="hidden" name="start_station" :value="trainInfo.start_station">
                <input type="hidden" name="end_station" :value="trainInfo.end_station">
                <input type="hidden" name="arrive_time" :value="trainInfo.arrive_time">
                <input type="hidden" name="id" :value="trainInfo.id">

            </form>

        </div>
    </div>
    <div style="line-height: 20px; margin-top: 10px;">提交订单表示已阅读并同意
        <a id="zl_gz" style="display: none;" target="_blank"
           href="https://mobile.12306.cn/otsmobile/h5/otsbussiness/zhonglao/international-organizationRules/international-organizationRules.html"
           shape="rect">《中老铁路跨境旅客联运组织规则》</a>
        <a target="_blank" href="https://mobile.12306.cn/otsmobile/h5/otsbussiness/info/transportationRules.html"
           shape="rect">《国铁集团铁路旅客运输规程》</a>
        <a id="kj_gz" style="display: none;" target="_blank"
           href="https://mobile.12306.cn/otsmobile/h5/otsbussiness/info/crossBorderPassenger.html" shape="rect">《广深港高速铁路跨境旅客运输组织规则》</a>
        <a target="_blank" href="https://mobile.12306.cn/otsmobile/h5/otsbussiness/info/serviceAnnouncement.html"
           shape="rect">《服务条款》</a>
    </div>
    <!--乘客信息 结束-->

    <div class="lay-btn">
        <a href="javascript:void(0);" onclick="history.go(-1)" class="btn92" shape="rect">上一步</a>
        <a href="javascript:void(0);" onclick="checkTicketInfo()" class="btn92s" shape="rect"
           style="background: #ffa50a">提交订单</a>
    </div>
    <div>
        <div class="tips-txt">
            <h2>温馨提示：</h2>
            <p>1. 一张有效身份证件同一乘车日期同一车次只能购买一张车票，高铁动卧列车除外。</p>
            <p>2.
                购买儿童票时，乘车儿童有有效身份证件的，请填写本人有效身份证件信息。自2023年1月1日起，每一名持票成年人旅客可免费携带一名未满6周岁且不单独占用席位的儿童乘车，超过一名时，超过人数应购买儿童优惠票。免费儿童可以在购票成功后添加。</p>
            <p>3.
                购买残疾军人（伤残警察）优待票的，须在购票后、开车前办理换票手续方可进站乘车。换票时，不符合规定的减价优待条件，没有有效"中华人民共和国残疾军人证"或"中华人民共和国伤残人民警察证"的，不予换票，所购车票按规定办理退票手续。</p>
            <p>4.一天内3次申请车票成功后取消订单（包含无座票时取消5次计为取消1次），当日将不能继续购票。</p>
            <p>5.未尽事宜详见《铁路旅客运输规程》等有关规定和车站公告。</p>
            <p>6.
                为确保乘客在旅途中有一个安全、舒适的乘坐环境，自2020年11月17日起，您可选择雪具快运服务，请提前1-2天选择雪具快运“门到站”或“站到站”服务，中铁快运提供雪具到站后3日免费保管，请您根据出行时间，提前咨询和办理。中铁快运客服热线：95572<br
                        clear="none">
            </p>
        </div>
    </div>
</div>
<!--引入底部footer.html文件-->
<div id="footer"></div>
<script type="text/javascript">
    $(document).ready(function () {
        // 使用AJAX加载footer
        $.ajax({
            url: '/home/footer.html',
            type: 'GET',
            success: function (data) {
                $('#footer').html(data);
            },
            error: function () {
                console.error('加载footer失败');
            }
        });
    });
</script>

</body>

<script type="text/javascript">
    // Vue实例
    window.app = new Vue({
        el: '#app',
        data: {
            trainInfo: {},
            passengers: [],
            userId: null // 添加用户ID字段
        },
        mounted() {
            // 从localStorage获取选中的车次信息
            const selectedTrain = localStorage.getItem('selectedTrain');
            if (selectedTrain) {
                this.trainInfo = JSON.parse(selectedTrain);
            } else {
            }

            // 获取当前用户ID（这里假设从localStorage获取，实际实现可能不同）
            this.getUserId();

            // 获取乘客数据
            this.loadPassengers();
        },
        methods: {
            // 获取当前用户ID
            getUserId() {
                // 实际项目中，用户ID可能存储在localStorage、sessionStorage或Cookie中
                // 这里简化处理，从localStorage获取
                this.userId = localStorage.getItem('USER_ID') || '1'; // 默认使用ID为1的用户
            },

            // 从后端接口获取乘客数据
            loadPassengers() {
                console.log('根据用户ID查询乘车人信息，用户ID:', this.userId);

                // 调用后端接口获取乘车人信息
                axios.get('/home/passenger/listByUserId', {
                    params: {
                        userId: this.userId
                    }
                })
                    .then(response => {
                        console.log('获取乘车人信息成功:', response.data);
                        // 提取data字段中的数据并进行格式转换
                        if (response.data && response.data.data && Array.isArray(response.data.data)) {
                            this.passengers = response.data.data.map(passenger => ({
                                id: passenger.passengerId.toString(), // 转换为字符串格式
                                passenger_name: passenger.passengerName, // 转换字段名
                                passenger_type: passenger.passengerType === 0 ? '成人' : '学生', // 转换为文本类型
                                card_type: '中国居民身份证', // 假设都是身份证
                                card_code: passenger.idCard // 转换字段名
                            }));
                        } else {
                            console.error('返回的数据格式不符合预期');
                            this.useMockPassengersData();
                        }
                    })
                    .catch(error => {
                        console.error('获取乘车人信息失败:', error);
                        // 错误处理：如果接口调用失败，使用模拟数据作为备用
                        alert('获取乘车人信息失败，使用默认数据');
                        this.useMockPassengersData();
                    });
            },

            // 使用模拟数据（作为接口调用失败的备用方案）
            useMockPassengersData() {
                this.passengers = [
                    {
                        id: '1',
                        passenger_name: '张三',
                        passenger_type: '成人',
                        card_type: '中国居民身份证',
                        card_code: '110101199001011234'
                    },
                    {
                        id: '2',
                        passenger_name: '李四',
                        passenger_type: '成人',
                        card_type: '中国居民身份证',
                        card_code: '110101199203045678'
                    },
                    {
                        id: '3',
                        passenger_name: '王五',
                        passenger_type: '学生',
                        card_type: '中国居民身份证',
                        card_code: '110101200005067890'
                    }
                ];
            },

            // 添加车票和乘客信息
            addTicket(passengerInfo, seat, event) {
                const obj = event.target;
                //获取乘客信息
                const passenger_name = passengerInfo.passenger_name;
                const card_type = passengerInfo.card_type;
                const card_code = passengerInfo.card_code;
                //获取当前所选中的复选框长度
                const number = document.querySelectorAll("input[name='passenger']:checked").length;

                //判断当前复选框是否已经选择过
                if (obj.checked) {  //选中状态
                    const ticketInfo = document.getElementById('ticketInfo_id');  //获取要展示的页面数据

                    // 移除初始的空行
                    const initialRow = document.getElementById('tr_id_0');
                    if (initialRow) {
                        initialRow.remove();
                    }

                    // 创建新的乘客行
                    const newRow = document.createElement('tr');
                    newRow.id = 'tr_id_' + passengerInfo.id;
                    newRow.innerHTML = `
                        <td>
                            <input type='hidden' class='sort-input' name='sort' value="${number}">
                            <span class='sort-number'>${number}</span>
                        </td>
                        <td>
                            <select id="ticketType_${passengerInfo.id}" name="ticket_type">
                                <option name="ticket_type" selected="selected" value="0">成人票</option>
                                <option value="1">儿童票</option>
                                <option value="2">学生票</option>
                                <option value="3">军人票</option>
                            </select>
                        </td>
                        <td>
                            <select id="seat_type_${passengerInfo.id}" name='seat_type'></select>
                        </td>
                        <td>
                            <div class="pos-rel"><input name="passenger_name" class="inptxt w110" value="${passenger_name}"
                                                        title="不允许变更乘车人信息" size="12" maxlength="20" type="text"
                                                        readonly="readonly">
                                <div class="w110-focus" id="passenger_name_1_notice" tabindex="-1"></div>
                            </div>
                        </td>
                        <td>
                            <select id="identity_type_${passengerInfo.id}" title="不允许变更乘车人信息"
                                    onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;"
                                    role="combobox" name='card_type' aria-label="中国居民身份证,不允许修改乘车人信息" readonly="readonly">
                                <option value="${card_type}" selected="selected">${card_type}</option>
                            </select>
                        </td>
                        <td>
                            <div class="pos-rel"><input id="passenger_id_no_1" class="inptxt w160" name='card_code' value="${card_code}"
                                                        title="不允许变更乘车人信息" size="20" maxlength="35" type="text"
                                                        readonly="readonly">
                                <div class="w160-focus" id="passenger_id_no_1_notice" tabindex="-1"></div>
                            </div>
                        </td>
                        <td style="width:40px;">
                            <a aria-label="占位符"  id="addchild_1" name="addchild_normalPassenger_1"></a>
                        </td>
                        <td title="删除乘车人">
                            <span aria-label="点击删除乘车人" tabindex="0" class="i-del"
                                  style="width:50px;margin-bottom: 10px;color: red;cursor: pointer;" onclick="removePassenger('${passengerInfo.id}')">删除</span>
                        </td>
                    `;

                    ticketInfo.appendChild(newRow);

                    // 添加入座信息
                    const seatSelect = document.getElementById('seat_type_' + passengerInfo.id);
                    for (let s of seat) {
                        const option = document.createElement('option');
                        option.value = s.seat_type_id + ',' + s.price;
                        option.textContent = s.seatType.seat_type_name + '（￥' + s.price + '）';
                        seatSelect.appendChild(option);
                    }
                } else {
                    //移除一条数据
                    document.getElementById('tr_id_' + passengerInfo.id).remove();
                    //重新排序
                    this.reorderPassengers();
                }
            },

            // 重新排序乘客
            reorderPassengers() {
                const sortInputs = document.querySelectorAll('.sort-input');
                sortInputs.forEach((input, index) => {
                    input.value = index + 1;
                    const numberSpan = input.nextElementSibling;
                    if (numberSpan && numberSpan.classList.contains('sort-number')) {
                        numberSpan.textContent = index + 1;
                    }
                });
            }
        }
    });

    // 移除乘客函数
    function removePassenger(passengerId) {
        document.getElementById('passenger_' + passengerId).checked = false;
        document.getElementById('tr_id_' + passengerId).remove();

        // 重新排序
        const app = Vue.prototype.$children[0];
        if (app && app.reorderPassengers) {
            app.reorderPassengers();
        }
    }

    // 核对车票信息函数
    function checkTicketInfo() {
        // 获取Vue实例
        const app = window.app;
        if (!app) {
            alert('系统错误，请刷新页面重试');
            return;
        }

        // 获取当前所选中的复选框对象(乘客对象)
        const passengerObj = document.querySelectorAll("input[name='passenger']:checked");

        // 检查是否选择了乘车人
        if (passengerObj.length < 1) {
            alert("请先选择乘车人信息！");
            return;
        }

        // 显示加载状态
        const loadingMessage = layer.msg('正在提交订单，请稍候...', {icon: 16, shade: 0.4, time: 0});

        try {
            // 构建提交的数据
            const orderData = {
                userId: app.userId,
                ticketId: app.trainInfo.id,
                price: 0, // 单一价格字段
                passengerIds: [] // 修改为passengerIds，只存储整数ID列表
            };

            // 获取选中的乘客复选框
            // 获取选中的乘客复选框
              const passengerObj = document.querySelectorAll("input[name='passenger']:checked");
              // 收集每个选中乘客的信息
            passengerObj.forEach(checkbox => {
                const passengerId = checkbox.id.replace('passenger_', '');
                const passenger = app.passengers.find(p => p.id === passengerId);

                if (passenger) {
                    // 获取对应的乘客行信息
                    const row = document.getElementById('tr_id_' + passengerId);
                    if (row) {
                        // 获取价格信息
                        const seatTypeSelect = row.querySelector("select[name='seat_type']");

                        if (seatTypeSelect && seatTypeSelect.value) {
                            const seatInfo = seatTypeSelect.value.split(',');
                            const singlePrice = parseFloat(seatInfo[1]) || 0;

                            // 只设置一次价格
                            if (orderData.price === 0) {
                                orderData.price = singlePrice;
                            }
                        }

                        // 只添加乘客ID作为整数到列表中
                        orderData.passengerIds.push(parseInt(passengerId));
                    }
                }
            });

            console.log('提交的订单数据:', orderData);

            // 使用axios发送请求
            axios.post('/home/order/createOrder', orderData)
                .then(response => {
                    layer.close(loadingMessage);
                    console.log('创建订单响应:', response.data);

                    if (response.data && response.data.code === 200) {
                        // 成功，跳转到支付页面
                        window.location.href = '/home/order/order_pay.html?order_id=' + response.data.data;
                    } else {
                        // 失败，显示错误信息
                        const errorMsg = response.data.message || '创建订单失败，请重试';
                        alert(errorMsg);
                    }
                })
                .catch(error => {
                    layer.close(loadingMessage);
                    console.error('创建订单失败:', error);

                    // 更友好的错误提示
                    const errorMessage = error.response && error.response.data && error.response.data.message
                        ? error.response.data.message
                        : '创建订单失败，请重试';
                    alert(errorMessage);
                });

            // 清空复选框对象
            passengerObj.forEach(obj => obj.checked = false);

        } catch (error) {
            layer.close(loadingMessage);
            console.error('处理订单数据时发生错误:', error);
            alert('处理订单数据时发生错误，请刷新页面重试');
        }
    }

    // 关闭选座模态框
    function closeSeatModal() {
        document.getElementById('seatSelectionModal').style.display = 'none';
    }

    // 确认选座并提交订单
    function confirmSeatSelection() {
        // 获取选中的座位偏好
        const seatPreference = document.querySelector("input[name='seatPreference']:checked").value;

        // 关闭模态框
        closeSeatModal();

        // 收集表单数据
        const form = document.getElementById('Form01');
        const formData = new FormData(form);

        // 添加座位偏好信息
        formData.append('seat_preference', seatPreference);

        // 转换为JSON对象
        const data = {};
        formData.forEach((value, key) => {
            data[key] = value;
        });

        // 获取选中的乘客信息
        const selectedPassengers = this.passengers.filter(p => p.selected).map(p => ({
            passenger_name: p.passenger_name,
            passenger_id: p.passenger_id,
            passenger_type: p.passenger_type
        }));
        data.selected_passengers = JSON.stringify(selectedPassengers);

        // 添加ticketId（从trainInfo.id获取）而不是车次id
        data.ticketId = this.trainInfo.id;
        // 移除可能存在的车次id相关字段
        delete data.train_number;

        // 使用axios发送请求
        axios.post('/home/ticket_manage/createOrder', data)
            .then(response => {
                // 后端生成订单信息后，跳转到订单页面
                window.location.href = '/home/order_pay.html?order_no=' + response.data.order_no;
            })
            .catch(error => {
                console.error('创建订单失败:', error);
                alert('创建订单失败，请重试');
            });

        // 清空复选框对象
        const passengerObj = document.querySelectorAll("input[name='passenger']:checked");
        passengerObj.forEach(obj => obj.checked = false);
    }
</script>
</html>

<!--添加乘客信息-->
<script type="text/javascript">
    // 修改Vue实例中的addTicket方法
    function addTicket(passengerInfo, seat, event) {
        const obj = event.target;
        //获取乘客信息
        const passenger_name = passengerInfo.passenger_name;
        const card_type = passengerInfo.card_type;
        const card_code = passengerInfo.card_code;
        //获取当前所选中的复选框长度
        const number = document.querySelectorAll("input[name='passenger']:checked").length;

        //判断当前复选框是否已经选择过
        if (obj.checked) {  //选中状态
            const ticketInfo = document.getElementById('ticketInfo_id');  //获取要展示的页面数据

            // 移除初始的空行
            const initialRow = document.getElementById('tr_id_0');
            if (initialRow) {
                initialRow.remove();
            }

            // 创建新的乘客行
            const newRow = document.createElement('tr');
            newRow.id = 'tr_id_' + passengerInfo.id;
            newRow.innerHTML = `
            <td>
                <input type='hidden' id='sort' name='sort' value="${number}">
                <span id='number'>${number}</span>
            </td>
            <td>
                <select id="ticketType_${passengerInfo.id}" name="ticket_type">
                    <option name="ticket_type" selected="selected" value="0">成人票</option>
                    <option value="1">儿童票</option>
                    <option value="2">学生票</option>
                    <option value="3">军人票</option>
                </select>
            </td>
            <td>
                <select id="seat_type_${passengerInfo.id}" name='seat_type'></select>
            </td>
            <td>
                <div class="pos-rel"><input name="passenger_name" class="inptxt w110" value="${passenger_name}"
                                        title="不允许变更乘车人信息" size="12" maxlength="20" type="text"
                                        readonly="readonly">
                    <div class="w110-focus" id="passenger_name_1_notice" tabindex="-1"></div>
                </div>
            </td>
            <td>
                <select id="identity_type_${passengerInfo.id}" title="不允许变更乘车人信息"
                        onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;"
                        role="combobox" name='card_type' aria-label="${card_type},不允许修改乘车人信息" readonly="readonly">
                    <option value="${card_type}" selected="selected">${card_type}</option>
                </select>
            </td>
            <td>
                <div class="pos-rel"><input id="passenger_id_no_1" class="inptxt w160" name='card_code' value="${card_code}"
                                        title="不允许变更乘车人信息" size="20" maxlength="35" type="text"
                                        readonly="readonly">
                    <div class="w160-focus" id="passenger_id_no_1_notice" tabindex="-1"></div>
                </div>
            </td>
            <td style="width:40px;">
                <a aria-label="占位符" id="addchild_1" name="addchild_normalPassenger_1"></a>
            </td>
            <td title="删除乘车人">
                <span aria-label="点击删除乘车人" tabindex="0" class="i-del"
                      style="width:50px;margin-bottom: 10px;color: red;cursor: pointer;" onclick="removePassenger('${passengerInfo.id}')">删除</span>
            </td>
        `;

            ticketInfo.appendChild(newRow);

            // 添加入座信息
            const seatSelect = document.getElementById('seat_type_' + passengerInfo.id);
            for (let s of seat) {
                const option = document.createElement('option');
                option.value = s.seat_type_id + ',' + s.price;
                option.textContent = s.seatType.seat_type_name + '（￥' + s.price + '）';
                seatSelect.appendChild(option);
            }
        } else {
            //移除一条数据
            document.getElementById('tr_id_' + passengerInfo.id).remove();
            //重新排序
            this.reorderPassengers();
        }
    }

    // 构建提交的数据
    const orderData = {
        userId: app.userId,
        ticketId: app.trainInfo.id, // 保留ticketId以便后端确认是哪个车次
        price: 0, // 修改为单一价格字段，与userId同级
        passengerIds: [] // 将passengers改为passengerIds，仅存储ID列表
    };

    // 收集每个选中乘客的信息
    passengerObj.forEach(checkbox => {
        const passengerId = checkbox.id.replace('passenger_', '');
        const passenger = app.passengers.find(p => p.id === passengerId);

        if (passenger) {
            // 获取对应的乘客行信息
            const row = document.getElementById('tr_id_' + passengerId);
            if (row) {
                // 获取价格信息
                const seatTypeSelect = row.querySelector("select[name='seat_type']");

                if (seatTypeSelect && seatTypeSelect.value) {
                    const seatInfo = seatTypeSelect.value.split(',');
                    const singlePrice = parseFloat(seatInfo[1]) || 0;

                    // 只设置一次价格，取第一个乘客的价格
                    if (orderData.price === 0) {
                        orderData.price = singlePrice;
                    }
                }

                // 添加乘客信息到订单数据
                orderData.passengers.push({
                    passengerId: passengerId,
                    passengerName: passenger.passenger_name,
                    passengerType: passenger.passenger_type,
                    cardType: passenger.card_type,
                    cardCode: passenger.card_code
                });
            }
        }
    });

    console.log('提交的订单数据:', orderData);

    // 使用axios发送请求
    axios.post('/home/ticket_manage/createOrder', orderData)
        .then(response => {
            layer.close(loadingMessage);
            console.log('创建订单成功:', response.data);

            // 检查响应数据格式
            if (response.data && response.data.data && response.data.data.orderNo) {
                if (response.data.data.orderNo === "车票不足") {
                    alert('创建订单失败 :' + response.data.data.orderNo);
                } else {
                    // 后端生成订单信息后，跳转到支付页面
                    window.location.href = '/home/order_pay.html?order_no=' + response.data.data.orderNo;
                }
            } else {
                alert('创建订单失败，返回数据格式不正确');
            }
        })
        .catch(error => {
            layer.close(loadingMessage);
            console.error('创建订单失败:', error);

            // 更友好的错误提示
            const errorMessage = error.response && error.response.data && error.response.data.message
                ? error.response.data.message
                : '创建订单失败，请重试';
            alert(errorMessage);
        });

    // 清空复选框对象
    passengerObj.forEach(obj => obj.checked = false);

</script>
</html>
